<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberaccount">账户信息</router-link>
      <router-link tag="li" to="/ymMemberaccountamendtel">修改手机号</router-link>
      <router-link tag="li" to="/ymMemberaccountamendneweimal">修改邮箱</router-link>
      <router-link tag="li" to="/ymMemberaccountamendpassword">修改密码</router-link>
      <router-link tag="li" v-if="user.shop == 0" to="/ymMemberapplyforverify">申请验证</router-link>
    </ul>
    <div class="error">
      <div class="content">
        <h4>鹰目网媒体主入驻流程</h4>
        <div class="succeed">
          <el-steps :space="200" :active="1" finish-status="success">
            <el-step title="填写基本信息"></el-step>
            <el-step title="提交企业资质"></el-step>
            <el-step title="提交审核"></el-step>
          </el-steps>
          <p class="bule">填写开通店铺所需信息，等待鹰目网工作人员审核（期间不能修改提交信息），若资料不正确或不完整，客服会打回提交信息，需修改信息后重新提交</p>
        </div>
        <h4>上传企业资质</h4>
        <div class="message">
          <div class="message-left">
            <p>工商注册企业名称</p>
            <p>企业法人</p>
            <p>营业执照</p>
            <p>组织机构代码证</p>
          </div>
          <div class="message-right">
            <div class="input">
              <input  v-model="ymMemberShop.contentCorp" type="text" placeholder="" /><span>*</span>
            </div>
            <div class="input">
              <input v-model="ymMemberShop.contentName" type="text" placeholder="" /><span>*</span>
            </div>
            <div class="default">
            	<input id="pic1" class="up_pic" type="file" placeholder="" @change="upFile(1)"/>
              <input class="img_type" type="button" value="选择图片" /><span>*</span>
              <p>身份证件</p>
              <input id="pic2" class="up_pic1" type="file" placeholder="" @change="upFile(2)"/>
              <input class="img_type1" type="button" value="选择图片" /><span>*</span>
            </div>
            <div>
              <img id="img1" width="208px" height="136px" src="../assets/ym-member/media/model.png" />
              <img id="img2" width="208px" height="136px" src="../assets/ym-member/media/model.png" />
            </div>
            <div class="default">
              <input id="pic3" class="up_pic" type="file" placeholder="" @change="upFile(3)"/>
              <input class="img_type" type="button" value="选择图片" /><span>*</span>
              <p>税务登记证</p>
              <input id="pic4" class="up_pic1" type="file" placeholder="" @change="upFile(4)"/>
              <input class="img_type1" type="button" value="选择图片" /><span>*</span>
            </div>
            <div>
              <img id="img3" width="208px" height="136px" src="../assets/ym-member/media/model.png" />
              <img id="img4" width="208px" height="136px" src="../assets/ym-member/media/model.png" />
            </div>
            <div class="input">
            	<input type="button" class="submit" @click="commit" value="提交"/>
            </div>
            <div>
              <!--<router-link tag="div" to="/ymMemberapplyforverifysubmitover" class="submit">提交</router-link>-->
              <router-link tag="div" to="/ymMemberapplyforverify" class="submits">上一步</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data(){
    	return{
    		requestAddr:this.GLOBAL.addr,
    		user:{},
    		ymMemberShop:{},
    		memberCorp:{}
    	}
    },
    mounted(){
    	this.getUser()
    },
    methods:{
    	getUser:function(){
    			var data = localStorage.getItem("user");
				if(data != null){
					this.user = JSON.parse(localStorage.getItem("user"));
					this.level = JSON.parse(localStorage.getItem("level"));
					this.flag = true;
				}else{this.flag = false;}
    	},
    	commit:function(){
    		this.ymMemberShop.memberId = this.user.autoId;
    		this.ymMemberShop.memberName = this.user.contentUser;
    		//this.ymMembershop.registerSource = '1';//设置注册来源为 ‘1’前台
    		this.$http.post(this.requestAddr+"/GetJson/saveYmMemberShop",this.ymMemberShop,{emulateJSON:true}).then(
    			(res)=>{
    				console.log(res.data);
    				if(res.data.code==0){
    					localStorage.setItem("user",JSON.stringify(res.data.user));
    					window.location.href="../ymMemberapplyforverifysubmitover#/ymMemberapplyforverifysubmitover";
    				}
    			}
    		)
    		console.log(this.ymMemberShop);
    	},
    	upFile:function(flag){
    		var file = document.getElementById("pic"+flag).files[0];
    		var formdata = new FormData();
    		formdata.append("file",file);
    		var reader = new FileReader();
    		reader.readAsDataURL(file);
    		reader.onload=function(){
    			document.getElementById("img"+flag).src=reader.result;
    		}
    		console.log(reader.result);
    		this.$http.post(this.requestAddr+"/GetJson/uploadImage",formdata,{emulateJSON:true}).then(
    			(res)=>{
    				console.log(res.data);
    				if(res.data.code == 0){
    					if(flag == 1){this.ymMemberShop.contentLicense = res.data.filepath;}
    					if(flag == 2){this.ymMemberShop.contentIdcard = res.data.filepath}
    					if(flag == 3){this.ymMemberShop.contentOrganizatioin = res.data.filepath}
    					if(flag == 4){this.ymMemberShop.contentRegistration = res.data.filepath}
    				}
    			}
    		)
    	}
    }
  }

</script>
<style scoped>
  .el-steps {
    width: 500px;
    padding-top: 35px;
  }
  .up_pic{
  	position: absolute;
  	opacity: 0;
  	z-index: 1000px;
  }
  
  .up_pic1{
  	position:relative;
  	opacity: 0;
  	z-index: 1000px;
  }
  .img_type1{
  	margin-left:-100px;
  }

</style>
<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:nth-child(5) {
          background-color: #036eb7;
          color: white;
        }
        &:hover {
          background-color: #036eb7;
          color: white;
        }
      }
    }
    .error {
      width: 1200px;
      background-color: white;
      margin: 0 auto;
      .content {
        width: 1200px;
        background-color: white;
        margin: 0 auto;
        margin-bottom: 30px;
        h4 {
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          padding-left: 40px;
          padding-top: 40px;
        }
        .succeed {
          width: 1030px;
          margin: 0 auto;
          p {
            padding-top: 35px;
            font-size: 14px;
            color: #333333;
            font-weight: bold;
            span {
              padding-left: 30px;
            }
          }
          .bule {
            color: #036eb7;
          }
        }
        .message {
          display: flex;
          .message-left {
            p {
              width: 145px;
              text-align: right;
              line-height: 60px;
              font-size: 12px;
              color: #333333;
              &:nth-child(1) {
                margin-top: 20px;
              }
              &:nth-child(4) {
                margin-top: 167px;
              }
            }
          }
          .message-right {
            margin-left: 25px;
            div {
              margin-top: 25px;
              .input {
                width: 625px;
              }
              input {
                width: 625px;
                height: 31px;
                padding-left: 10px;
                font-size: 14px;
                outline: none;
                border-radius: 3px;
                border: 1px solid #dddddd;
              }
              span {
                margin-left: 10px;
                color: #f29600;
              }
              .img {
                img {
                  position: relative;
                  top: 10px;
                  left: 15px;
                }
              }
              .color {
                color: #f29600;
                font-size: 14px;
                padding-left: 15px;
              }
              .cm {
                padding-left: 30px;
              }
              img {
                &:nth-child(2n) {
                  margin-left: 156px;
                }
              }
              .submit {
                float: left;
                width: 103px;
                height: 30px;
                color: white;
                font-size: 16px;
                background-color: #f29600;
                text-align: center;
                line-height: 30px;
                border-radius: 7px;
                margin-top: 44px;
                margin-bottom: 35px;
              }
              .submits {
                float: left; 
                width: 103px;
                height: 30px;
                color: white;
                background-color: #999999;
                text-align: center;
                line-height: 30px;
                border-radius: 7px;
                margin-top: 44px;
                margin-bottom: 35px;
                margin-left: 35px;
              }

            }
            .default {
              display: flex;
              margin-top: 35px;
              input {
                width: 100px;
                height: 28px;
                padding-left: 10px;
                font-size: 14px;
                outline: none;
                border-radius: 3px;
                background-color: #dddddd;
                color: #999999;
              }
              span {
                margin-left: 10px;
                color: #f29600;
                line-height: 31px;
                font-size: 12px;
              }
              p {
                width: 82px;
                text-align: right;
                font-size: 12px;
                color: #333333;
                line-height: 31px;
                margin-right: 22px;
                margin-left: 150px;
                span {
                  margin-right: 20px;
                  margin-left: 10px;
                  color: #f29600;
                  line-height: 31px;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
